<template>
  <div class="pie-chart" ref="chartContainer"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'PieChart',
  data() {
    return {
      // 数据定义
      data: [
        { value: 350, name: "刑事检察" },
        { value: 200, name: "刑事执行检察" },
        { value: 500, name: "公益诉讼检察" },
        { value: 136, name: "控告申诉检察" },
        { value: 650, name: "民事检察" },
        { value: 650, name: "行政检察" },
        { value: 650, name: "知识产权检察" },
        { value: 650, name: "综合" },
      ]
    };
  },
  methods: {
    async fetchData() {
      try {
        const response = await this.$axios.get("/api/survey/type");
        this.data = response.data.data;
    this.initChart();

      } catch (error) {
        console.error(error);
      }
    },
    // 初始化图表
    initChart() {
      const chartContainer = this.$refs.chartContainer;
      const myChart = echarts.init(chartContainer);

      const sum = this.data.reduce((accumulator, current) => accumulator + current.value, 0);

      const option = {
        color: [
          "rgba(255, 51, 53, 1)", "rgba(255, 102, 41, 1)", "rgba(255, 182, 10, 1)", "rgba(250, 217, 5, 1)", "rgba(96, 184, 46, 1)",
          "rgba(20, 204, 143, 1)", "rgba(0, 140, 255, 1)", "rgba(37, 85, 244, 1)"
        ],
        legend: [
          {
            pageIconSize: 14,
            pageButtonItemGap: 1,
            
            left: "45%",
            orient: "vertical",
            top: "0%",
            icon: "circle",
            itemWidth: 10,
            itemHeight: 12,
            itemGap: 7,
            formatter: (name) => {
              for (let i = 0; i < this.data.length; i++) {
                if (name === this.data[i].name) {
                  const rate = ((this.data[i].value / sum) * 100).toFixed(2);
                  // return `{a|${name}\n} {b|${rate}%}  {c|${this.data[i].value}}`;
                  return `{a|${name}\n} {b|${rate}%}`;

                }
              }
            },
            textStyle: {
              color: "#FFF",
              rich: {
                a: {
                  width: 50,
                  fontSize: 16,
                  color:'#b9e8ff',
                },
                b: {
                  width: 30,
                  fontSize: 18,
                  color:'#b9e8ff',
                },
                c: { width: 50 },
              },
            },

          },
        ],
        tooltip: {
          backgroundColor: "#2e6099",
          textStyle: { color: "#FFF" },
        },
        series: [
          {
            type: "pie",
            radius: ["40%", "60%"],
            center: ["25%", "35%"],
            avoidLabelOverlap: false,
            label: { show: false, position: "center" },
            emphasis: {
              label: {
                show: true,
                fontSize: 16,
                fontWeight: "bold",
              },
            },
            labelLine: { show: false },
            data: this.data,
          },
        ],
      };

      myChart.setOption(option);

      // 监听窗口大小变化，自动调整图表大小
      window.addEventListener('resize', () => myChart.resize());
    },
  },
  mounted() {
    this.fetchData();
  },
  beforeDestroy() {
    if (this.chartInstance) this.chartInstance.dispose();
  },
};
</script>

<style scoped>
.pie-chart {
  width: 100%;
  height: 240px;
}
</style>
